<template>
  <div id="app" class="account">
    <div class="main">
      <div class="nav">
      </div>
      <div class="cont" v-loading="loading" element-loading-text="拼命加载中">
        <ul>
          <li class="firstLi">
            <div>账户</div>
            <div>注册时间</div>
            <div>类型</div>
            <div>操作</div>
          </li>
          <li class="dataLi" v-for="(item,index) in items" v-if="isDatas">
            <div>{{item.account}}</div>
            <div>{{item.createDate | ctimeFun}}</div>
            <div>{{item.type | typeFun}}</div>
            <div>
              <small v-if="item.enable == '0'" @click="sealClick(index,1)">
                <span class="glyphicon glyphicon-remove"></span>封停
              </small>
              <small v-else @click="sealClick(index,0)">
                <span class="glyphicon glyphicon-remove"></span>解封
              </small>
              <small @click="deleteClick(index)">
                <template>
                  <el-button class="elbut" type="text"><span class="glyphicon glyphicon-trash"></span>删除</el-button>
                </template>
              </small>
              <small @click="roleClick(index)">
                <span class="glyphicon glyphicon-zoom-in"></span>角色操作
              </small>
              <small @click="roleAddClick(index)">
                <span class="glyphicon glyphicon-zoom-in"></span>添加角色
              </small>
            </div>
          </li>
          <li class="nullLi" v-else>
            <div>暂时没有数据</div>
          </li>
          <li class="lastLi">
            <div class="lastSel">
              <el-pagination class="elLastPag" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSizeNum" :current-page="currentPage" layout="total, sizes, prev, pager, next" :total="totalNum">
                </el-pagination>
            </div>
            <div class="lastPag">
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!--更新角色-->
    <div :class="{rolePopup:isRolePopup,rolePopupShow:isRolePopupShow}">
      <transition name="slide-fade">
        <div class="RoleP" v-show="RoleShow" v-loading="adding" element-loading-text="正在加载中...">
          <div>角色管理</div>
          <div class="roleCont">
            <div class="roleName">
              <ul class="roleNameUl">
                <li class="roleFirstLi">
                  角色名称
                </li>
                <li v-show="NullNameShow" class="roleLi" v-for="(role,index) in roleNames">
                  {{role.name}}
                </li>
                <li v-show="!NullNameShow" class="roleNullLi">
                  暂无数据
                </li>
              </ul>
            </div>
            <div class="roleId">
              <ul class="roleIdUl">
                <li class="roleFirstIdLi">
                  <div>角色Id</div>
                  <div>操作</div>
                </li>
                <li v-show="NullIdShow" class="roleIdLi" v-for="(role,index) in roleIds">
                  <div>{{role}}</div>
                  <div>
                    <small @click="deleteRoleClick(index)">
                          <template>
                            <el-button class="elbut" type="text"><span class="glyphicon glyphicon-trash"></span>删除</el-button>
                          </template>
                     </small>
                  </div>
                </li>
                <li v-show="!NullIdShow" class="roleNullLi">
                  暂无数据
                </li>
              </ul>
            </div>
          </div>
          <div class="roleBut">
            <div @click="delAllClick">删除所有角色</div>
            <div @click="callClick">取消</div>
          </div>
        </div>
      </transition>
    </div>
    <!--角色操作-->
    <div :class="{addRolePopup:isAddRolePopup,addRoleShow:isAddRoleShow}">
      <transition name="slide-fade">
        <div class="addRoleP" v-show="addShow" v-loading="adding" element-loading-text="正在添加中...">
          <div class="addPTitle">角色操作</div>
          <ul class="addPUl">
            <li class="addPLi">
              <div>
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange($event)" class="addPliChexCity">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group class="addPliChex" v-model="checkedCities" @change="handleCheckedCitiesChange">
                  <el-checkbox class="addPliChexCity" v-for="city in cities" :key="city">{{city.name}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </li>
            <li class="butLi">
              <div @click="callClick">
                取消
              </div>
              <div @click="addRoleClick">
                保存
              </div>
            </li>
          </ul>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
  import { mapActions, mapState } from 'vuex'
  export default {
    name: 'account',
    data() {
      return {
        NullNameShow: false,
        NullIdShow: false,
        roleIds: [],
        roleNames: [],
        currentRoles: [],
        loading: false,
        isRolePopup: true,
        isRolePopupShow: true,
        RoleShow: false,
        isAddRolePopup: true,
        isAddRoleShow: true,
        addShow: false,
        adding: false,
        currentPage: 10,
        pageSizeNum: 1,
        totalNum: 1,
        isSeal: 0,
        items: [],
        cities: [],
        checkedCities: [
        ],
        checkAll: true,
        isIndeterminate: true,
        checkedIds: [],
        roleInd: '',
        isDatas: true,
        roleDelInd: ''
      }
    },
    created: function () {
      var self = this
      self.loading = true
      // 获取所用用户信息
      self.getAccountAll({
        pageNo: self.pageSizeNum,
        pageSize: self.currentPage
      }).then((data) => {
        console.log(data)
        if (data.code === 200) {
          if (data.data.content.length > 0) {
            self.isDatas = true
            self.items = data.data.content
            self.totalNum = data.data.totalElements
            self.loading = false
          } else {
            self.isDatas = false
            self.loading = false
          }
          // 获取所有角色
          self.getRoleAllPage({
            pageNo: 1,
            pageSize: 10000
          }).then((data) => {
            console.log(data)
            if (data.code === 200) {
              if (data.data.content.length > 0) {
                data.data.content.forEach(function (ele) {
                  ele.createDate = null
                  ele.updateDate = null
                })
                self.cities = data.data.content
              }
            }
          }).catch(msg => {
            console.log(msg)
            switch (msg.status) {
              case 500:
                break;
              case 504:
                break;
              default:
                break;
            }
          })
        }
      }).catch(msg => {
        console.log(msg)
        switch (msg.status) {
          case 500:
            break;
          case 504:
            break;
          default:
            break;
        }
      })
    },
    filters: {
      ctimeFun: function (val) {
        var now = new Date(val)
        var year = now.getYear() - 100;
        var month = now.getMonth() + 1;
        month = month > 9 ? month : "0" + month
        var date = now.getDate();
        date = date > 9 ? date : "0" + date
        var hour = now.getHours();
        hour = hour > 9 ? hour : "0" + hour
        var minute = now.getMinutes();
        minute = minute > 9 ? minute : "0" + minute
        var second = now.getSeconds();
        second = second > 9 ? second : "0" + second
        return "20" + year + "-" + month + "-" + date + "   " + hour + ":" + minute + ":" + second;
      },
      typeFun: function (val) {
        switch (val) {
          case "0":
            return "普通账户"
            break;
          case "1":
            return "邮箱"
            break;
          case "2":
            return "电话"
            break;
          case "3":
            return "第三方微信登录"
            break;
          default:
            break;
        }
      },
      enableFun: function (val) {
        switch (val) {
          case "0":
            return "普通账户"
            break;
          case "1":
            return "邮箱"
            break;
          default:
            break;
        }
      }
    },
    methods: {
      // 取消弹框
      callClick() {
        var self = this;
        self.isRolePopupShow = true
        self.RoleShow = false
        self.isAddRoleShow = true
        self.addShow = false
      },
      // 分页-每页显示
      handleSizeChange(val) {
      },
      // 分页-上下页
      handleCurrentChange(val) {
      },
      // 角色操作
      roleAddClick(index) {
        var self = this
        this.isAddRoleShow = false
        this.addShow = true
        this.roleInd = index
        self.adding = true
        self.getARRoleAll({
          accountId: self.items[index].id
        }).then((data) => {
          console.log(data.data, self.cities)
          self.adding = false
          if (data.code === 200 && data.message == "success") {
            // self.checkedCities = data.data
          }
        }).catch(msg => {
          console.log(msg)
          switch (msg.status) {
            case 500:
              break;
            case 504:
              break;
            default:
              break;
          }
        })
      },
      // 添加角色 全选
      handleCheckAllChange(event) {
        this.checkedCities = event.target.checked == true ? this.cities : [];
        this.isIndeterminate = false;
      },
      // 添加角色 选择其中几个
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
      // 添加操作
      addRoleClick() {
        // 添加角色
        var self = this
        self.adding = true
        console.log(self.checkedCities)
        if (self.checkedCities.length > 0) {
          var obj = self.resourcesFun(self.checkedCities)
          var roleIdStr = obj.retArrs;
          self.getARDelRole({
            accountId: self.items[self.roleInd].id
          }).then((data) => {
            if (data.code === 200) {
              self.getARAddRole({
                accountId: self.items[self.roleInd].id,
                roleId: roleIdStr
              }).then((data) => {
                self.adding = false
                console.log(data)
                if (data.code === 200) {
                  self.$message('保存成功')
                  self.isAddRoleShow = true
                  self.addShow = false
                }
              }).catch(msg => {
                console.log(msg)
                switch (msg.status) {
                  case 500:
                    break;
                  case 504:
                    break;
                  default:
                    break;
                }
              })
            }
          }).catch(msg => {
            console.log(msg)
            switch (msg.status) {
              case 500:
                break;
              case 504:
                break;
              default:
                break;
            }
          })
        } else {
          self.getARDelRole({
            accountId: self.items[self.roleInd].id
          }).then((data) => {
            if (data.code === 200) {
              self.adding = false
              self.$message('保存成功')
            }
          }).catch(msg => {
            console.log(msg)
            switch (msg.status) {
              case 500:
                break;
              case 504:
                break;
              default:
                break;
            }
          })
        }
      },
      // 拼接角色id
      resourcesFun(arr) {
        var obj = {
          retArrs: ''
        }
        for (var i = 0; i < arr.length; i++) {
          obj.retArrs += arr[i].id + ','
        }
        return obj
      },
      //查看角色
      roleClick(index) {
        var self = this;
        self.roleDelInd = index
        self.isRolePopupShow = false
        self.RoleShow = true;
        self.adding = true
        self.getARRoleAll({
          accountId: self.items[index].id
        }).then((data) => {
          console.log(data)
          self.adding = false
          if (data.code === 200 && data.message == "success") {
            if (data.data.length > 0) {
              self.roleNames = data.data
              self.NullNameShow = true
            } else {
              self.NullNameShow = false
            }
          }
        }).catch(msg => {
          console.log(msg)
          switch (msg.status) {
            case 500:
              break;
            case 504:
              break;
            default:
              break;
          }
        })
        self.getARRoleIdAll({
          accountId: self.items[index].id
        }).then((data) => {
          console.log(data)
          if (data.code === 200 && data.message == "success") {
            if (data.data.length > 0) {
              self.roleIds = data.data;
              self.NullIdShow = true
            } else {
              self.NullIdShow = false
            }
          }
        }).catch(msg => {
          console.log(msg)
          switch (msg.status) {
            case 500:
              break;
            case 504:
              break;
            default:
              break;
          }
        })

      },
      // 删除账户角色
      deleteRoleClick(index) {
        var self = this
        console.log(self.items[self.roleDelInd].id, self.roleIds[index])
        var nameStr = "此操作将删除 " + self.roleNames[index].name + " 该角色,是否继续 ?"
        this.$confirm(nameStr, '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          self.adding = true
          self.getARDelRoleId({
            accountId: self.items[self.roleDelInd].id,
            roleId: self.roleIds[index]
          }).then((data) => {
            console.log(data)
            if (data.code === 200 && data.message == "success") {
              self.$message('删除成功')
              self.getARRoleAll({
                accountId: self.items[self.roleDelInd].id
              }).then((data) => {
                console.log(data)
                self.adding = false
                if (data.code === 200 && data.message == "success") {
                  if (data.data.length > 0) {
                    self.roleNames = data.data
                    self.NullNameShow = true
                  } else {
                    self.NullNameShow = false
                  }
                }
              }).catch(msg => {
                console.log(msg)
                switch (msg.status) {
                  case 500:
                    break;
                  case 504:
                    break;
                  default:
                    break;
                }
              })
              self.getARRoleIdAll({
                accountId: self.items[self.roleDelInd].id
              }).then((data) => {
                self.adding = false
                if (data.code === 200 && data.message == "success") {
                  if (data.data.length > 0) {
                    self.roleIds = data.data;
                    self.NullIdShow = true
                  } else {
                    self.NullIdShow = false
                  }
                }
              }).catch(msg => {
                console.log(msg)
                switch (msg.status) {
                  case 500:
                    break;
                  case 504:
                    break;
                  default:
                    break;
                }
              })
            }
          }).catch(msg => {
            console.log(msg)
            switch (msg.status) {
              case 500:
                break;
              case 504:
                break;
              default:
                break;
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 删除所有角色
      delAllClick() {
        var self = this
        self.adding = true
        self.getARDelRole({
          accountId: self.items[self.roleDelInd].id
        }).then((data) => {
          if (data.code === 200) {
            self.$message('删除成功')
            self.getARRoleAll({
              accountId: self.items[self.roleDelInd].id
            }).then((data) => {
              console.log(data)
              self.adding = false
              if (data.code === 200 && data.message == "success") {
                if (data.data.length > 0) {
                  self.roleNames = data.data
                  self.NullNameShow = true
                } else {
                  self.NullNameShow = false
                }
              }
            }).catch(msg => {
              console.log(msg)
              switch (msg.status) {
                case 500:
                  break;
                case 504:
                  break;
                default:
                  break;
              }
            })
            self.getARRoleIdAll({
              accountId: self.items[self.roleDelInd].id
            }).then((data) => {
              self.adding = false
              if (data.code === 200 && data.message == "success") {
                if (data.data.length > 0) {
                  self.roleIds = data.data;
                  self.NullIdShow = true
                } else {
                  self.NullIdShow = false
                }
              }
            }).catch(msg => {
              console.log(msg)
              switch (msg.status) {
                case 500:
                  break;
                case 504:
                  break;
                default:
                  break;
              }
            })
          }
        }).catch(msg => {
          console.log(msg)
          switch (msg.status) {
            case 500:
              break;
            case 504:
              break;
            default:
              break;
          }
        })
      },
      // 删除账户
      deleteClick(index) {
        var self = this
        var nameStr = "此操作将删除 " + self.items[index].account + "该账户,是否继续 ?"
        this.$confirm(nameStr, '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          console.log('confirm')
          self.loading = true
          self.getAccountDel({
            id: self.items[index].id,
          }).then((data) => {
            console.log(data)
            if (data.code === 200 && data.message == "success") {
              self.getAccountAll({
                pageNo: self.pageSizeNum,
                pageSize: self.currentPage
              }).then((data) => {
                if (data.code === 200) {
                  self.$message('删除成功')
                  if (data.data.content.length > 0) {
                    self.isDatas = true
                    self.items = data.data.content
                    self.totalNum = data.data.totalElements
                    self.loading = false
                  } else {
                    self.isDatas = false
                    self.loading = false
                  }
                }
              }).catch(msg => {
                console.log(msg)
                switch (msg.status) {
                  case 500:
                    break;
                  case 504:
                    break;
                  default:
                    break;
                }
              })
            }
          }).catch(msg => {
            console.log(msg)
            switch (msg.status) {
              case 500:
                break;
              case 504:
                break;
              default:
                break;
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 解封账户
      sealClick(index, count) {
        var self = this
        self.loading = true
        self.getAccountUpdate({
          id: self.items[index].id,
          enable: count
        }).then((data) => {
          if (data.code === 200 && data.message == "success") {
            if (count == 1) {
              self.$message('禁用成功')
            } else {
              self.$message('解封成功')
            }
            self.getAccountAll({
              pageNo: self.pageSizeNum,
              pageSize: self.currentPage
            }).then((data) => {
              console.log(data)
              if (data.code === 200) {
                if (data.data.content.length > 0) {
                  self.isDatas = true
                  self.items = data.data.content
                  self.totalNum = data.data.totalElements
                  self.loading = false
                } else {
                  self.isDatas = false
                  self.loading = false
                }
              }
            }).catch(msg => {
              console.log(msg)
              switch (msg.status) {
                case 500:
                  break;
                case 504:
                  break;
                default:
                  break;
              }
            })
          }
        }).catch(msg => {
          console.log(msg)
          switch (msg.status) {
            case 500:
              break;
            case 504:
              break;
            default:
              break;
          }
        })
      },
      ...mapActions(['getAccountAll', 'getAccountDel', 'getAccountUpdate', 'getARRoleAll', 'getRoleAll','getARRoleIdAll','getRoleAllPage','getARAddRole','getARDelRole','getARDelRoleId'])
    }
  }

</script>

<style scoped>
  .account {
    width: 100%;
    display: flex;
    justify-content: center;
    min-height: 650px;
    height: 100%;
    overflow: hidden;
  }
  
  .main {
    width: 96%;
    min-height: 600px;
    height: 100%;
    border: 1px solid #8492a6;
    border-top: 2px solid #58b7ff;
    border-radius: 3px;
    box-shadow: 0px 5px 5px #d3dce6;
  }
  
  .nav {
    height: 0px;
    width: 100%;
    border-bottom: 1px solid #8492a6;
    overflow: hidden;
  }
  
  .cont {
    width: 100%;
    min-height: 600px;
    height: 100%;
  }
  
  .cont > ul > li {
    display: flex;
    border-bottom: 1px solid #8492a6;
    height: 45px;
    line-height: 45px;
    text-align: center;
    overflow: hidden;
  }
  
  .cont > ul > li > div {
    width: 22%;
    border-left: 1px solid #8492a6;
  }
  
  .cont > ul > li > div:nth-child(4) {
    width: 34%;
    border-left: 1px solid #8492a6;
    min-width: 390px;
  }
  
  .cont > ul > li > div:nth-child(1) {
    border-left: 0;
  }
  
  .cont > ul .firstLi {
    background-color: #e5e9f2;
  }
  
  .cont > ul .lastLi {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  
  .cont > ul .dataLi > div:last-child {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .cont > ul .dataLi > div:last-child small {
    cursor: pointer;
    border: 1px solid #ddd;
    color: #666;
    font-size: 14px;
    display: inline-block;
    min-width: 75px;
    margin-right: 5px;
    margin-left: 5px;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    color: #fff;
  }
  
  .cont > ul .dataLi > div:last-child small:nth-child(1) {
    background-color: #f8b252;
  }
  
  .cont > ul .dataLi > div:last-child small:nth-child(2) {
    background-color: #ef7383;
  }
  
  .cont > ul .dataLi > div:last-child small:nth-child(3) {
    background-color: #58b7ff;
    width: 100px;
  }
  
  .cont > ul .dataLi > div:last-child small:nth-child(4) {
    background-color: #58b7ff;
    width: 100px;
  }
  
  .cont > ul .nullLi > div:nth-child(1) {
    width: 100%;
    text-align: center;
  }
  
  .cont > ul .dataLi > div:last-child small span {
    font-size: 12px;
    margin-right: 3px;
    color: #fff;
  }
  
  .elbut {
    color: #fff;
    margin: 0;
    padding: 0;
  }
  
  .lastSel {
    height: 45px;
  }
  
  .cont > ul .lastLi > div {
    border-left: 0;
    margin-top: 15px;
  }
  
  .elLastPag {
    height: 45px;
  }
  /*账户角色*/
  
  .rolePopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .RoleP {
    width: 600px;
    min-height: 200px;
    background-color: #fff;
    border-radius: 5px;
  }
  
  .RoleP>div:nth-child(1) {
    width: 100%;
    height: 50px;
    font-size: 20px;
    text-align: center;
    font-weight: 600;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
  }
  
  .roleCont {
    width: 100%;
    height: 100%;
    display: flex;
  }
  
  .roleCont>div {
    height: 100%;
  }
  
  .roleName {
    width: 30%;
    text-align: center;
  }
  
  .roleName ul {
    height: 100%;
  }
  
  .roleId {
    width: 70%;
  }
  
  .roleFirstLi {
    height: 40px;
    font-size: 15px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
    text-align: center;
  }
  
  .roleFirstIdLi {
    height: 40px;
    font-size: 15px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    display: flex;
  }
  
  .roleFirstIdLi>div:nth-child(1) {
    width: 80%;
    text-align: center;
  }
  
  .roleFirstIdLi>div:nth-child(2) {
    border-left: 1px solid #ccc;
    width: 20%;
    text-align: center;
  }
  
  .rolePopup .roleNullLi {
    height: 45px;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    line-height: 45px;
    text-align: center;
  }
  
  .roleIdLi {
    height: 45px;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    line-height: 45px;
    width: 100%;
    display: flex;
  }
  
  .roleIdLi>div:nth-child(1) {
    width: 80%;
    text-align: center;
  }
  
  .roleIdLi>div:nth-child(2) {
    border-left: 1px solid #ccc;
    width: 20%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .roleLi {
    height: 45px;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    line-height: 45px;
    text-align: center;
  }
  
  .roleBut {
    display: flex;
    justify-content: flex-end;
    height: 60px;
    width: 100%;
    align-items: center;
    border-top: 1px solid #ccc;
  }
  
  .roleBut>div {
    min-width: 90px;
    height: 35px;
    border: 1px solid #ccc;
    border-radius: 3px;
    line-height: 35px;
    font-size: 15px;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
  }
  
  .roleBut>div:nth-child(1) {
    width: 110px;
  }
  
  .rolePopupShow {
    display: none;
  }
  
  .roleIdLi>div:nth-child(2) small {
    cursor: pointer;
    border: 1px solid #ddd;
    color: #666;
    font-size: 14px;
    display: inline-block;
    min-width: 65px;
    margin-right: 5px;
    margin-left: 5px;
    height: 27px;
    line-height: 27px;
    overflow: hidden;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    color: #fff;
  }
  
  .roleIdLi>div:nth-child(2) small:nth-child(1) {
    background-color: #58b7ff;
  }
  
  .roleIdLi>div:nth-child(2) small span {
    font-size: 12px;
    margin-right: 3px;
    color: #fff;
  }
  
  .elbut {
    color: #fff;
    margin: 0;
    padding: 0;
  }
  /*添加角色*/
  
  .addRolePopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .addRoleP {
    width: 450px;
    min-height: 250px;
    background-color: #fff;
    border-radius: 5px;
  }
  
  .addPTitle {
    width: 100%;
    height: 50px;
    font-size: 20px;
    text-align: center;
    font-weight: 600;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
  }
  
  .addPLi {
    display: flex;
    min-height: 40px;
    height: 100%;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
  }
  
  .addPLi>div {
    margin: 0 auto;
    width: 90%;
    height: 100%;
  }
  
  .addPliChex {
    display: flex;
    flex-wrap: wrap;
  }
  
  .addPliChexCity {
    margin: 0;
    padding: 0;
    margin: 7px;
    margin-left: 9px;
  }
  
  .butLi {
    display: flex;
    justify-content: flex-end;
    height: 60px;
    width: 100%;
    align-items: center;
    border-top: 1px solid #ccc;
  }
  
  .butLi>div {
    width: 90px;
    height: 35px;
    border: 1px solid #ccc;
    border-radius: 3px;
    line-height: 35px;
    font-size: 15px;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
  }
  
  .addRoleShow {
    display: none;
  }
  
  .slide-fade-enter-active {
    transition: all 0.7s ease;
  }
  
  .slide-fade-enter,
  .slide-fade-leave-active {
    transform: translateY(-30px);
    opacity: 0;
  }
</style>